<template lang="html">
  <div class="group rules-step">
      <div class="group-head">
        <span class="group-title">
          拼团玩法
        </span>
        <span class="group-more" @click="MaskRulesEvent">
          详细规则
          <img  class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png">
        </span>
      </div>

      <ul class="rules-list">
        <li>
          ①参团
          <span>
            <img  class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png">
          </span>
        </li>
        <li>
          ②邀请好友
          <span><img  class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png"></span>
        </li>
        <li>
          ③满员发货
          <p>不满自动退款</p>
        </li>
      </ul>
        <MaskRules ref="MaskRules" content="3333" />
    </div>
</template>

<script>
import MaskRules from '../../components/MaskRules'
export default {
  components: {
    MaskRules,
  },
  data() {
    return {

    }
  },
  methods: {
    // 显示拼团规则弹框
    MaskRulesEvent() {
      this.$refs.MaskRules.MaskRulesEvent()
    }
  }
}
</script>

<style lang="scss" scoped>
.rules-list{
  display: flex;
  li{
    flex: 1;
    text-align: center;
    padding: .6rem 0;
    font-size: .4rem;
    span{
      float: right;
      width: .5rem;
      display: inline-block;
    }
    p{
      color: #999;
      font-size: .32rem;
    }
  }
}
</style>
